<template>
  <div>
    <el-dialog title="修改库区" :visible.sync="updateAreavis" @close="close" width="500px" append-to-body>
        <el-form :rules="rules" :model="addAreaForm" ref="addstorearea">

            <el-form-item prop="areaNumber" label="编号:" :label-width="formLabelWidth">
                <el-input v-model="addAreaForm.areaNumber"></el-input>
            </el-form-item>
            <el-form-item prop="areaName" label="名称:" :label-width="formLabelWidth">
                <el-input v-model="addAreaForm.areaName"></el-input>
            </el-form-item>
            <el-form-item label="所属仓库:" :label-width="formLabelWidth">
                {{main_store}}
            </el-form-item>
            <el-form-item label="备注:" :label-width="formLabelWidth">
                <el-input v-model="addAreaForm.areaRemarks"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="danger" :loading="submitLoading" @click="successAddstore('addstorearea')">确 定</el-button>
        </div>
          </el-dialog>
        </div>
</template>

<script>
import { AddStoreArea, UpdateArea } from '@/api/store.js';

export default {
  name: 'addstore',
  props: ['updateareadialog', 'checkArea'],
  data() {
    return {
      updateAreavis: false,
      submitLoading: false,
      addAreaForm: {
        areaNumber: '',
        areaName: '',
        areaRemarks: '',
      },
      formLabelWidth: '80px',
      rules: {
          areaNumber: [
            { required: true, message: '请输入库区编号', trigger: 'blur' },
          ],
          areaName: [
            { required: true, message: '请输入库区名称', trigger: 'blur' },
          ],
      }
    }
  },
  computed: {
    main_store() {
      return this.$store.state.store.main_store;
    },
    store_id() {
      return this.$store.state.store.store_id;
    },
  },
  methods: {
    close() {
      this.updateAreavis = false;
      this.resetForm();
      this.$emit("update:updateareadialog", false);
    },
    resetForm() {
      this.addAreaForm.areaNumber = '';
      this.addAreaForm.areaName = '';
      this.addAreaForm.areaRemarks = '';
    },
    successAddstore(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitLoading = true;     
          let reqData2 = {
              areaId: this.checkArea.areaId,
              areaNumber: this.addAreaForm.areaNumber,
              areaName: this.addAreaForm.areaName,
              warehouseId: this.store_id,
              areaRemarks: this.addAreaForm.areaRemarks,
          }
          // 更新库区
          UpdateArea(reqData2).then(response => {
              let data = response.data
              this.$message({
                  message: data.msg,
                  type: 'success'
              })
              this.submitLoading = false;
              this.$refs.addstorearea.resetFields();
              this.updateAreavis = false;
              this.resetForm();
              this.$emit("update:updateareadialog", false);
          }).catch(error => {
              this.submitLoading = false;
          })
          
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      
    }
  },
  watch: {
    updateareadialog(newVal,oldVal) {  
      this.updateAreavis = newVal;
    },
    checkArea(newVal) {
       if (newVal) {
        this.addAreaForm.areaNumber = this.checkArea.areaNumber;
        this.addAreaForm.areaName = this.checkArea.areaName;
        this.addAreaForm.areaRemarks = this.checkArea.areaRemarks;
        }
    }
  }
}
</script>

<style lang="scss" scoped>
  
</style>